<template>
 <div>
    <div class="search-con search-con-top">
      <div class="fl">
        <Input clearable placeholder="输入昵称搜索" class="search-input" v-model.trim="search.nickname"/>
        <Input clearable placeholder="输入手机号搜索" class="search-input" v-model.trim="search.mobile"/>
        <Button class="search-btn" type="primary" @click="getVipList">搜索</Button>
      </div>
    </div>
    <Table border :columns="columns" :data="tableData">
      <template slot-scope="{ row,index }" slot="action">
        <Poptip title="押金管理" placement="bottom-end" :v-model="editIndex==index&&show">
          <Button class="search-btn" style="margin-right:5px;" size="small" type="primary" @click="price='';showvisi(index)">交押金</Button>
          <div class="api" slot="content">
              <input type="number" class="numberInput" v-model="price" placeholder="请填写押金额度" style="display:block;margin:10px 0 20px;"/>
              <div style="float: right;">
                <!-- <Button class="search-btn" style="margin-right:5px;" size="small" type="text" @click="hide()">取消</Button> -->
                <Button class="search-btn" size="small" type="primary" @click="ok(row,index)" >确认</Button>
              </div>
          </div>
        </Poptip>
        <Poptip title="押金管理" placement="bottom-end" :v-model="editIndex==index&&show">
          <Button class="search-btn" style="margin-right:5px;" size="small" type="primary" @click="price1='';showvisi(index)">退押金</Button>
          <div class="api" slot="content">
              <input type="number" class="numberInput" v-model="price1" placeholder="请填写押金额度" style="display:block;margin:10px 0 20px;"/>
              <div style="float: right;">
                <!-- <Button class="search-btn" style="margin-right:5px;" size="small" type="text" @click="hide()">取消</Button> -->
                <Button class="search-btn" size="small" type="primary" @click="cancel(row,index)" >确认</Button>
              </div>
          </div>
        </Poptip>
      </template>
    </Table>
    <Page style="padding:20px" @on-change="pageNum" @on-page-size-change="pageSize" show-total :total="page.total" show-elevator show-sizer transfer prev-text="上一页" next-text="下一页"/>
 </div>
</template>

<script>
import { userL, userDeposit } from "@/api/data";

 export default {
   data () {
     return {
       show: false,
       visible:false,
       price: '',
       price1: '',
       editIndex: -1,
        search:{
        },
        tableData:[],
        columns:[
            {
                type: "index",
                width: 60,
                align: "center",
                key: ""
            },
            {
                title: "名称",
                key: "name"
            },
            {
                title: "手机号",
                key: "mobile"
            },
            {
                title: "会员等级",
                key: "level"
            },
            {
                title: "级别名称",
                key: "levelName"
            },
            {
                title: "地址",
                key: "address"
            },
            {
                title: "积分",
                key: "point"
            },
            {
                title: "累计积分",
                key: "totalPoint"
            },
            {
                title: "积分",
                key: "point"
            },
            {
                title: "押金",
                key: "deposit"
            },
            {
                title: "点金券",
                key: "coupon"
            },
            {
                title: "余额",
                key: "balance"
            },
            {
              title: "操作",
              slot: "action",
              width: 200,
              align: "center"
            }
        ],
        page:{
            current: 1,
            total: 0,
            pageSize: 10
       }
     }
   },
   methods: {
     showvisi(index) {
       this.editIndex=index
       this.show=true
     },
     ok(row,index) {
       if (this.price) {
         userDeposit({
              uid:row.uid,
              deposit:this.price,
              type:1
          }).then(res=>{
              if(res.code == 1){
                this.hide(index);
                   this.getVipList()
              }else {
                this.$Message.error('失败');
              }
          })
       } else {
         this.$Message.error('请填写押金额度!');
       }
     },
     hide() {
       this.editIndex=-1
       this.show=false
     },
     cancel(row,index) {
       if (this.price1) {
         userDeposit({
              uid:row.uid,
              deposit:this.price1,
              type:2
          }).then(res=>{
              if(res.code == 1){
                this.hide(index);
                   this.getVipList()
              } else {
                this.$Message.error('押金退款不能超过总额');
              }
          })
       } else {
         this.$Message.error('请填写押金额度!');
       }
     },
       pageSize(value){
        this.page.pageSize = value
        this.page.current = 1
        this.getVipList()
     },
     pageNum(value){
        this.page.current = value
        this.getVipList()
     },
     getVipList(){
          userL({
              nickname:this.search.nickname,
              mobile:this.search.mobile,
              pageNum:this.page.current,
              pageSize:this.page.pageSize
          }).then(res=>{
              if(res.code == 1){
                   this.tableData = res.data.data
                   this.page.total = res.data.total
              }
          })
     }
   },
   mounted () {
     this.getVipList()
   }
 }
</script>

<style>


</style>
